<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">

	<title>MyGis | CustomForm</title>
	<link rel="icon" href="resources/img/favicon.png" type="image/x-icon" />
 	<script language="JavaScript" type="text/javascript" src="resources/frontResources/jquery/js/jquery-ui-1.10.3.custom.js"></script>    
	<script language="JavaScript" type="text/javascript" src="resources/frontResources/jquery/js/jquery-1.9.1.js"></script>
	<link href="resources/frontResources/jquery/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	
	<style type="text/css">
		.clasContenedor{
			display:none;
			margin: 20px auto 10px auto;
			width: 400px;
			border: 1px solid #CCCCCC;
		}
		
		.classContentElemento{
			padding:8px;
		}
	</style>
 	<script type="text/javascript">
		var customFormToServer ="";
		function verControlFormPpal(){
			if($("#contenedor").html==""){
				
			}else{
				
			}
		}
 		function eliminarElemento(idElemento){
			$("#"+idElemento+"").remove();
			if($("#contenedor").html()==""){
				$("#contenedor").hide(500);
			}
		}
	
		function crearCampoTexto(){
			$( "#contenedor" ).show();
			textHtlm = $("#contenedor").html();
			nroElemento=$("#contenedor input:text").length;
			idElemento=		"inputText"+nroElemento;
			idElementoSpan=	"inputTextSpan"+nroElemento;
			idElementoText= "inputTextText"+nroElemento;
			//Introduce en campo en el div contenedor, este va decorado para que lo vea al usuario 
			$("#contenedor").html(textHtlm+"<div id=\""+idElemento+"\" class=\"classContentElemento\"><span id=\""+idElementoSpan+"\" style=\"padding-right:5px\">"+$("#campoTexto").val()+"</span><input id=\""+idElementoText+"\" type=\"text\" value=\"test input\"/><img style=\"vertical-align: middle; float: right;\"src=\"resources/img/eliminar.png\" onclick=\"eliminarElemento('"+idElemento+"');\"/></div>") ;
		}
	
		function crearCampoRadio(){
			$( "#contenedor" ).show();
			textHtlm = $("#contenedor").html();
			nroElemento=$("#contenedor input:radio").length;
			idElemento="inputRadio"+nroElemento;
			idElementoSpan=	"inputRadioSpan"+nroElemento;
			idElementoText= "inputRadioText"+nroElemento;
			$("#contenedor").html(textHtlm+"<div id=\""+idElemento+"\" class=\"classContentElemento\"><span id=\""+idElementoSpan+"\"  style=\"padding-right:5px\">"+$("#campoRadio").val()+"</span><input id=\""+idElementoText+"\" type=\"radio\" value=\"test input\"/><img style=\"vertical-align: middle; float: right;\"src=\"resources/img/eliminar.png\" onclick=\"eliminarElemento('"+idElemento+"');\"/></div>") ;
		}
	
		function crearCampoCheck(){
			$( "#contenedor" ).show();
			textHtlm = $("#contenedor").html();
			nroElemento=$("#contenedor input:checkbox").length;
			idElemento="inputCheck"+nroElemento;
			idElementoSpan=	"inputCheckboxSpan"+nroElemento;
			idElementoText= "inputCheckboxText"+nroElemento;
			$("#contenedor").html(textHtlm+"<div id=\""+idElemento+"\" class=\"classContentElemento\"><span id=\""+idElementoSpan+"\"   style=\"padding-right:5px\">"+$("#campoCheck").val()+"</span><input id=\""+idElementoText+"\" type=\"checkbox\" value=\"test input\"/><img style=\"vertical-align: middle; float: right;\"src=\"resources/img/eliminar.png\" onclick=\"eliminarElemento('"+idElemento+"');\"/></div>") ;
		}

		
/* 		function crearBotonCancelar(){
			$("#contenedor").show();
			textHtlm = $("#contenedor").html();
			nroElemento=$("#contenedor input:button").length;
			idElemento="inputbutton"+nroElemento;
			$("#contenedor").html(textHtlm+"<div id=\""+idElemento+"\" class=\"classContentElemento\"><input type=\"button\" value=\""+$("#campoBotonCancelar").val()+"\"/><img style=\"vertical-align: middle;\"src=\"resources/img/eliminar.png\" onclick=\"eliminarElemento('"+idElemento+"');\"/></div>") ;
		}

		function crearBotonSubmit(){
			$("#contenedor").show();
			textHtlm = $("#contenedor").html();
			nroElemento=$("#contenedor input:submit").length;
			idElemento="inputbutton"+nroElemento;
			$("#contenedor").html(textHtlm+"<div id=\""+idElemento+"\" class=\"classContentElemento\"><input type=\"submit\" value=\""+$("#campoBotonenviar").val()+"\"/><img style=\"vertical-align: middle;\"src=\"resources/img/eliminar.png\" onclick=\"eliminarElemento('"+idElemento+"');\"/></div>") ;
		} */	
	</script>
</head>
<body>
	<div id="generadorForn" style="padding-left:25px">
		<p style="font-weight: bold; padding-top_15px;">Crear campo para ingreso de datos</p>
		<div><span style="padding-right:5px">Ingresa Nombre del campo</span><input id="campoTexto" type="text" value="Nombre del Campo"/><span style="padding-right:5px"></span><input type="button" value="Crear Campo Texto" onclick="crearCampoTexto();"/></div>
		
		<p style="font-weight: bold; padding-top_15px;">Crear campo para seleccion de datos</p>
		<div><span style="padding-right:5px">Ingresa Nombre del campo</span><input id="campoCheck" type="text" value="Opcion"/><span style="padding-right:5px"></span><input type="button" value="Crear Opcion" onclick="crearCampoCheck();"/></div>
		
		<p style="font-weight: bold; padding-top_15px;">Crear campo para seleccion de datos</p>
		<div><span style="padding-right:5px">Ingresa Nombre del campo</span><input id="campoRadio" type="text" value="Opcion"/><span style="padding-right:5px"></span><input type="button" value="Crear Opcion" onclick="crearCampoRadio();"/></div>

<!-- 
		<p style="font-weight: bold; padding-top_15px;">Crear boton para cancelar</p>
		<div><span style="padding-right:5px">Ingresa Nombre del boton</span><input id="campoBotonCancelar"type="text" value="Nombre del Boton"/><span style="padding-right:5px"></span><input type="button" value="Crear Boton Cancelar" onclick="crearBotonCancelar();"/></div>
		
		<p style="font-weight: bold; padding-top_15px;">Crear campo para ingreso de datos</p>
		<div><span style="padding-right:5px">Ingresa Nombre del campo</span><input id="campoBotonenviar" type="text" value="Nombre del Campo"/><span style="padding-right:5px"></span><input type="button" value="Crear Boton ok/Enviar" onclick="crearBotonSubmit();"/></div>
 -->		
	</div>
	<div id="contenedor" class="clasContenedor"></div>
	<div id="fornPpal">
		
	</div>
</body>
</html>

